<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <!-- <style>
    *{
      margin: 0;
      padding: 0;
    }
    .box{
      width: 200px;
      height: 200px;
      background-color: red;
    }
  </style> -->
  <!-- <style>
    .one{
      width: 200px;
      height: 200px;
      background-color: blue;
      margin: 0 auto;
      position: relative;
    }
    .two{
      width: 150px;
      height: 150px;
      background-color: pink;
      /* 使用定位的方式 让物体居中在父元素中 */
      position: absolute;
      /* 子元素移动的是父元素的宽度的(50%)left 50% 父元素高度(50%)top 50% */
      left: 50%;
      top: 50%;
      /* 移动自身宽度(x轴的-50%)自身高度(y轴的-50%)居中对齐的方法之一 */
      transform: translateX(-50%) translateY(-50%);
    }
    .three{
      width: 100px;
      height: 100px;
      background-color: red;
      position: absolute;
      left:50%;
      top:50%;
      transform: translateX(-50%) translateY(-50%);
    }
  </style> -->
  <!-- <style>
    .box{
      width: 200px;
      height: 200px;
      background-color: red;
    }
  </style> -->
  <!-- <style>
    *{
      margin: 0;
      padding: 0;
    }
    .box{
      width: 200px;
      height: 200px;
      background-color: red;
      position: absolute;
    }
  </style> -->
  <!-- <style>
    .one{
      width: 200px;
      height: 200px;
      background-color: blue;
      position: relative;
    }
    .two{
      width: 100px;
      height: 100px;
      background-color: pink;
      position: absolute;
      left: 50%;
      top:50%;
      transform: translateX(-50%) translateY(-50%);
    }
    .three{
      width: 50px;
      height: 50px;
      background-color: orange;
      position: absolute;
      left: 50%;
      top:50%;
      transform: translateX(-50%) translateY(-50%);
    }
  </style> -->
</head>
<body>
  <!-- 元素注册事件的方式 -->
  <!-- <div class="box"></div>
  <script>
    var div = document.querySelector('div');
    //通过on方式注册的事件(不能同时给一个标签注册同一个事件 后面的事件把前面的覆盖了)
    div.onclick = function(){
      alert(1);
    }
    div.onclick = function(){
      alert(2);
    }
  </script> -->

 <!-- 通过事件监听的方式给元素注册事件 -->
  <!-- <div class="box"></div>
  <script>
    //通过事件监听的方式给元素(标签注册事件)
    //dom.addEventListener(event,listener,useCapture)三个参数
    //第一个参数：event 代表具体的事件类型(发生的事件类型),原来的事件类型去掉'on'(例如 onclick 不加on -> click)
    //第二个参数：listener 代表函数(该事件的处理程序代码)
    //第三个参数：useCapture (可选 值写true/false(false为默认值))
    //通过addEventListener()注册点击事件
    var div = document.querySelector('div');
    div.addEventListener('click',function(){
      alert(1);
    });
    div.addEventListener('click',function(){
      alert(2);
    })

    //dom.attachEvent(eventtype,function)二个参数 (兼容IE的方式 原来的事件类型不需要把'on'去掉)
    div.attachEvent('onclick',function(){
      alert(1);
    })

    //兼容性代码
    if(div.addEventListener){
      div.addEventListener('click',function(){
        alert(1);
      })
    }else if(div.attachEvent){
      div.attachEvent('onclick',function(){
        alert(2);
      })
    }
  </script> -->

  <!-- 如何移除on方法注册的事件 -->
  <!-- <input type="button" value="按钮">
  <script>
    //使用on方法注册事件
    var btn = document.querySelector('input');
    btn.onclick = function(){
      alert(1);
    }
    //移除on方法注册的事件(通过给事件赋值为null移除on方法注册的事件)
    btn.onclick = null;
  </script> -->

  <!-- 如何移除事件监听的方式注册的事件  -->
  <!-- <input type="button" value="按钮">
  <script>
    var btn = document.querySelector('input');
    //使用事件监听 addEventListener()注册事件
    btn.addEventListener('click',function(){
      alert(1)
    })

    //使用removeEventListener(event,listener,useCapture)方式移除 有三个参数
    //使用addEventListener()注册的事件必须使用removeEventListener()移除该事件
    //注意：如果在移除addEventListener()事件的时候,那么要在注册的时候,函数(处理程序的代码)要设置为命名函数
    btn.addEventListener('click',fn)
    function fn(){
      alert(1)
    }
    //使用removeEventListener()移除addEventListener()注册的事件
    btn.removeEventListener('click',fn);
  </script> -->

  <!-- 如何移除事件监听方式注册的事件 -->
  <!-- <input type="button" value="按钮">
  <script>
    var btn = document.querySelector('input');
    btn.attachEvent('onclick',fn);
    function fn(){
      alert(1);
    }
    btn.detachEvent('onclick',fn);
  </script> -->
  <!-- 事件监听的第三个参数 为false(默认值) true-->
  <!-- <div class="one">
    <div class="two">
      <div class="three"></div>
    </div>
  </div>
  <script>
    var divs = document.querySelectorAll('div');
    for(var i = 0; i < divs.length; i++){
      //事件监听中(useCapture 第三个参数是一个布尔值 true/false)
      divs[i].addEventListener('click',function(){
        //打印当前标签对应的类名
        console.log(this.className);
      },true)
    }
    //使用addEventListener()第三个参数 为false的时候产生的效果为事件冒泡
    //事件冒泡：会将当前事件从内向外依次传递(从内部一层一层向外部传递,一直到最外面称为事件冒泡)

    //如果addEventListener()第三个参数 为true的时候产生的的效果为事件捕获
    //事件捕获：会将当前事件从外向内依次捕获(从外部一层一层向内部捕获，一直到被点击的那层结束)

    //事件执行：点击哪个元素,代码就执行到该对应的元素身上

    //事件流(事件三要素)是什么？
    //事件捕获  事件执行  事件冒泡 称为事件流(也就是事件三要素,事件执行的三个过程)
  </script> -->
  <!-- 事件委托 -->
  <!-- <ul>
    <li>我是li1</li>
    <li>我是li2</li>
    <li>我是li3</li>
    <li>我是li4</li>
    <li>我是li5</li>
  </ul>
  <script>
    //传统方式 实现点击哪了li标签控制台打印哪个li标签
    var lis = document.querySelectorAll('li');
    for(var i = 0; i < lis.length; i++){
      lis[i].onclick = function(){
        console.log(this.innerText);
      }
    }
    //委托：将自己需要完成的事情交给别人去完成
    //利用委托的思想解决实现：点击哪个li就给哪个li注册点击事件
    //委托方式：
    var ul = document.querySelector('ul');
    ul.onclick = function(e){
      console.dir(e);
      console.log(e.target.innerText);
    }
    //在每一个事件中，都包含一个事件对象参数(这个事件参数e是系统内置的)
    //事件对象参数中保存的就是我们当前执行事件时候的一些信息
    //(点击的是哪个具体的标签，这个具体标签身上有哪些属性或者信息)
    //事件对象参数相当于我们之前学习过的arguments
    //(arguments会保存好多不知道用户传入的参数)
    //事件对象参数e(中保存当前是什么事件并且这个事件作用于哪个元素(标签)身上，
    //以及这些元素在这个事件中具有什么属性或者方法，如何通过事件对象e操作这个元素中的属性或方法)
  </script> -->
  <!-- 事件对象参数中的属性介绍 -->
  <!-- <div class="box"></div>
  <script>
    var div = document.querySelector('.box');
    div.onclick = function(e){
      //通过事件对象参数e可以获取到当前点击事件中的相关信息
      console.dir(e);

      console.log(e.target);//获取当前事件中，真正触发的事件对象(事件源)
      console.log(e.type);//获取当前事件类型

      //1.如果页面中存在8像素外边距,那么clientX clientY 显示为 面中标签元素(例如div(box))相对于HTML的距离
      //2.如果去掉页面中8像素外边距,那么clientX clientY 显示为 面中标签元素(例如div(box))相对于HTML(body)的距离
      //3.其实clientX clientY 就指的是 页面中元素到html的距离(因为body身上有8像素外边距与html之间)
      console.log(e.clientX ,e.clientY);//例 点击左上角 坐标是(8,8) 页面中的标签元素div(box)相对于HTML的距离(在没有清除页面中html和body之间的8像素外边距的时候))
      
      //1.如果页面中通过 offsetX offsetY 获取到的元素的位置是相对于当前元素自身以左上角坐标圆点(0,0)
      console.log(e.offsetX, e.offsetY);//例 点击左上角 坐标是(0,0) 页面中的标签元素div(box)相对自己(左上角)的距离

      //1.如果页面中存在8像素外边距,那么pageX pageY 显示为 面中标签元素(例如div(box))相对于HTML的距离
      //2.如果去掉页面中8像素外边距,那么pageX pageY 显示为 面中标签元素(例如div(box))相对于HTML(body)的距离
      //3.其实pageX pageY 指的是 页面中元素到html的距离或者body距离(因为body身上有8像素外边距与html之间)
      console.log(e.pageX, e.pageY);//例 点击左上角 坐标是(8,8)页面中的标签元素div(box)相对于HTML的距离(在没有清除页面中html和body之间的8像素外边距的时候))
     
      //1.如果页面中通过 screenX screenY 获取到的元素的位置是相对于整个屏幕(浏览器)
      console.log(e.screenX, e.screenY);//例 点击左上角 坐标是(8.79)页面中标签元素div(box)相对于整个浏览器的距离(坐标点说明 要以整个浏览器屏幕的左上角为圆点(0,0))
    }
  </script> -->
  <!-- <div class="box"></div>
  <script>
    var div = document.querySelector('.box');
    //给整个文档注册鼠标移动事件 document.onmousemoves 事件
    document.onmousemove = function(e){
     console.dir(e.clientX,e.clientY)
     var x = e.clientX;
     var y = e.clientY;
     div.style.left = x + 'px';
     div.style.top =  y + 'px';
    }
  </script> -->
  <!-- <div class="one">
    <div class="two">
      <div class="three"></div>
    </div>
  </div>
  <script>
    var divs = document.querySelectorAll('div');
    for(var i = 0; i < divs.length; i++){
      divs[i].addEventListener('click',function(e){
        e.stopPropagation();
        console.log(this.className);
      },false)
    }
  </script> -->
  <!-- 键盘事件 -->
  <!-- <script>
    //给整个文档注册事件(就是给document注册键盘事件)
    //按下任意键盘上的键都会触发这个事件
    document.onkeydown = function(){
      console.log(1);
    }
    //当键盘上按下的键抬起的时候触发这个事件
    document.onkeyup = function(){
      console.log('该键已被弹起');
    }
    //当键盘上字母键,数字键,空格键,回车键被按下去的时候触发该事件(支持的键比较少)
    //(onkeypress键盘事件 系统按钮无法得到识别。（如：箭头键,TAB,ctrl等功能键）)
    document.onkeypress = function(){
      console.log('支持数字键和字母键回车键空格键');
    }
  </script> -->
  <!-- <script>
    //获取网络状态
    //通过online该属性可以获取当前网络状态
    //window也是一个对象,是一个BOM对象(所以是用对象点的方式验证)
    //navigator也是一个对象,包含了有关浏览器的信息
    var state = window.navigator.onLine;
    alert(state);
    //如果返回值是true那么代表当前处于连网状态
    //如果返回值是false那么代表当前处于断网状态
    // 只能检测一次是否有网的 不能实时监控网络状态
  </script> -->
  <!-- <script>
    //实时获取当前网络状态(可以设置 online事件 或 offline事件)
    //online事件：一旦处于连网状态,该事件就会执行
    window.addEventListener('online',function(){
      alert('当前处于连网状态');
    })
    //offline事件：一旦处于断网状态，该事件就会执行
    window.addEventListener('offline',function(){
      alert('当前处于断网状态');
    })
  </script>

  <script>
    window.ononline = function(){
      alert('当前是连网状态');
    }
    window.onoffline = function(){
      alert('当前是断网状态');
    }
  </script> -->

  <!-- <script>
    //获取地理定位
    //获取当前位置,该方法只能获取一次当前的位置
    window.navigator.geolocation.getCurrentPosition(success,error);
    //success error 这两个都是函数(都回调函数))
    //如果能获取到当前用户的位置信息,那么就执行success函数中的代码
    //如果不能获取到当前用户的位置信息,那么就执行error函数中的代码
      function success(){
        console.log(1+"已经获取到该用户的当前位置信息");
      }
      function error(){
        console.log(2+'无法获取到该用户的当前位置信息')
      }
  </script> -->

  <!-- <script>
    //实时获取当前地理位置信息
    //获取用户实时的位置信息
    window.navigator.geolocation.watchPosition(success,error);
    //回调函数：函数作为参数使用称为回调函数(将一个函数作为一个参数使用称为回调函数)
    //如果能获取到当前用户的位置信息,那么就执行success函数中的代码
    //如果不能获取到当前用户的位置信息,那么就执行error函数中的代码
    function success(){
      //获取当前位置的经度
      console.log(position.coords.longitude)
      //获取当前位置的纬度
      console.log(position.coords.latitude)
    };
    function error(){
      console.log(2+'无法获取到该用户的当前位置信息');
    };
  </script> -->

</body>
</html>